<template>
    <el-dialog
        :title="title"
        append-to-body
        destroy-on-close
        :model-value="showDialog"
        @close="closeDialog()"
    >
        <!-- 表单 -->
        <el-form
            :model="form"
            ref="formRef"
            :rules="rules"
            label-width="80px"
            :inline="false"
        >
            <el-form-item label="源客户端ID" prop="originClientId">
                <el-select
                    v-model="originClientId"
                    placeholder="源客户端ID"
                    clearable
                    @change="findVisitorPort(originClientId)"
                >
                    <el-option
                        v-for="item in originClientList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        :namespace="item"
                    />
                </el-select>
            </el-form-item>

            <el-form-item label="客户端访问端口" prop="visitorPort">
                <el-select
                    v-model="visitorPort"
                    placeholder="客户端访问端口"
                    clearable
                >
                    <el-option
                        v-for="item in visitorList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                        <span style="float: left">
                            端口:【{{ item.value }}】{{ item.label }}</span
                        >
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="目标客户端ID" prop="targetClientId">
                <el-select
                    v-model="targetClientId"
                    placeholder="目标客户端ID"
                    clearable
                >
                    <el-option
                        v-for="item in toClientList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        :namespace="item"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="目标客户端地址" prop="permeateTargetIp">
                <el-input
                    v-model="permeateTargetIp"
                    placeholder=""
                    clearable
                ></el-input>
            </el-form-item>
            <el-form-item label="目标客户端端口" prop="permeateTargetPort">
                <el-input
                    v-model="permeateTargetPort"
                    placeholder=""
                    clearable
                ></el-input>
            </el-form-item>
            <el-form-item label="描述" prop="describe">
                <el-input
                    v-model="describe"
                    placeholder=""
                    clearable
                ></el-input>
            </el-form-item>
        </el-form>

        <template v-slot:footer>
            <span>
                <el-button @click="closeDialog()">取消</el-button>
                <el-button type="primary" @click="onSubmit()">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import {
    reactive,
    toRefs,
    ref,
    defineProps,
    defineEmits,
    onMounted,
} from "vue";
const rules = {
    originClientId: [
        {
            required: true,
            message: "请选择原始客户端",
            trigger: "blur",
        },
    ],

    targetClientId: [
        {
            required: true,
            message: "请选择目标客户端ID",
            trigger: "blur",
        },
    ],
    permeateTargetIp: [
        {
            required: true,
            message: "请输入客户端目标IP",
            trigger: "blur",
        },
    ],
    permeateTargetPort: [
        {
            required: true,
            message: "请输入目标客户端端口",
            trigger: "blur",
        },
    ],
    visitorPort: [
        {
            required: true,
            message: "请选择访客端口",
            trigger: "blur",
        },
    ],
};
const props = defineProps({
    showDialog: {
        type: Boolean,
        default: true,
    },
    title: {
        type: String,
        default: "添加",
    },
    rowData: {
        type: Object,
        default: null,
    },
});
const emit = defineEmits(["closeDialog"]);
const { title, rowData } = toRefs(props);
const closeDialog = () => {
    emit("closeDialog", false);
};
const formRef = ref(null);
const visitorList = ref(null);

const clientList = ref(null);

const form = reactive({
    originClientId: "",
    targetClientId: "",
    permeateTargetIp: "0.0.0.0",
    permeateTargetPort: "",
    visitorPort: "",
    describe: "",
});
const {
    originClientId,

    targetClientId,
    permeateTargetIp,
    permeateTargetPort,
    visitorPort,
    describe,
} = toRefs(form);

/**
 * @description: 初始化
 * @param {*}
 * @return {*}
 */
rowData.value &&
    ((originClientId.value = rowData.value.originClientId),
    (targetClientId.value = rowData.value.targetClientId),
    (permeateTargetIp.value = rowData.value.permeateTargetIp),
    (permeateTargetPort.value = rowData.value.permeateTargetPort),
    (visitorPort.value = rowData.value.visitorPort),
    (describe.value = rowData.value.describe));
/**
 * @description:提交
 * @param {*}
 * @return {*}
 */
const onSubmit = () => {
    formRef.value.validate(async (valid) => {
        if (valid) {
            let res;
            if (title.value === "添加") {
                res =
                    await VE_API.cloudNetworkServerPerMeate.lazyInternalNetworkClientPermeateClientMappingSave(
                        form,
                    );
            } else {
                res =
                    await VE_API.cloudNetworkServerPerMeate.lazyInternalNetworkClientPermeateClientMappingUpdate(
                        {
                            permeateTargetPort:
                                rowData.value.permeateTargetPort,
                            ...form,
                        },
                    );
            }
            const { code } = res;
            if (code === 0) {
                closeDialog();
            }
        } else {
            console.log("error submit!!");
            return false;
        }
    });
};
/**
 * 获取未使用的访客端口
 * @param visitorPort
 * @returns {Promise<void>}
 */
const findVisitorPort = async (clientId) => {
    // 查询未使用的访客端口
    let res =
        await VE_API.cloudNetworkServerPerMeate.lazyNettyClientPermeatePortPoolList(
            {
                clientId: clientId,
            },
        );
    const { code } = res;
    if (code === 0 && res.data) {
        res.data.map((item) => {
            item.label = item.describe;
            item.value = item.visitorPort;
        });
        visitorList.value = res.data ? res.data : [];
        // databaseSchemaId.value = serverSchemaList.value[0].id;
    }
};

const findClientList = async () => {
    VE_API.cloudNetwork.cloudClientFindListGroupByClient({}).then((res) => {
        if (res.code === 0) {
            if (res.data) {
                res.data.map((item) => {
                    item.label = item.clientId;
                    item.value = item.clientId;
                });
                clientList.value = res.data ? res.data : [];
            }
        }
    });
};
onMounted(async () => {
    await findClientList();
});
</script>

<style lang="scss" scoped></style>
